<template>
  <nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
    <div class="container-fluid">
      <ul class="navbar-nav flex-nowrap ms-auto">
        <li class="nav-item dropdown no-arrow mx-1"></li>
        <li class="nav-item dropdown no-arrow mx-1">
          <div class="shadow dropdown-list dropdown-menu dropdown-menu-end" aria-labelledby="alertsDropdown"></div>
        </li>
        <li class="nav-item dropdown no-arrow">
          <div class="nav-item dropdown no-arrow">
            <a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">
              <span class="d-none d-lg-inline me-2 text-gray-600 small">
                {{vname}}
              </span>
              </a>
            <div class="dropdown-menu shadow dropdown-menu-end animated--grow-in">
              <a class="dropdown-item" @click="logout()">
              <i class="fas fa-sign-out-alt fa-sm fa-fw me-2 text-gray-400"></i>
                退出登录
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: "NavTop",
  methods:{
    logout(){
      sessionStorage.clear();
      this.$router.push({path:'/login'});
      this.$message.warning("已退出登录");
    }
  },
  data(){
    return{
      vname:''
    }
  },
  created() {
    this.vname = sessionStorage.getItem("vname");
  }
}
</script>

<style scoped>

</style>
